<template>
    <div>
        <div>
            <el-form :inline="true" size="mini">
                <el-form-item label="称呼">
                    <el-input v-model="search.name" size="mini" style="width:130px;"></el-input>
                </el-form-item>
                <el-form-item label="域名">
                    <el-input v-model="search.domain" size="mini" style="width:130px;"></el-input>
                </el-form-item>
                <el-form-item>
                    <div>
                        <el-button type="primary" @click="onSearch">搜索</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-table :data="data" border style="width: 100%">
                <el-table-column type="index" label="#" width="50" align="center"></el-table-column>
                <el-table-column prop="name" label="称呼" width="120" align="center"></el-table-column>
                <el-table-column prop="mobile" label="联系电话" width="180" align="center"></el-table-column>
                <el-table-column label="内容" align="center">
                    <template slot-scope="scope">
                        <p style="text-align: left;">{{scope.row.content}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="domain" label="提交域名" width="180" align="center"></el-table-column>
                <el-table-column prop="create_time" label="提交时间" width="180" align="center"></el-table-column>
                <el-table-column label="操作" width="120px" align="center">
                    <template slot-scope="scope">
                        <el-button type="danger" @click="onDel(scope.row)" size="mini">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align: right;margin: 15px auto;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="p"
                    :page-sizes="[10,15, 20, 30, 40]"
                    :page-size="limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import {axget,axpost} from '@/components/api/index'
export default {
    data(){
        return {
            loading: false,
            data: [],
            total: 0,
            p:1,
            limit: 15,
            search: {
                name: '',
                domain: ''
            }
        }
    },
    created(){
        this.onLoad()
    },
    methods:{
        onLoad(){
            this.getList({
                p: this.p,
                limit: this.limit,
                search: this.search
            })
        },
        onSearch(){
            this.getList({
                p: 1,
                limit: this.limit,
                search: this.search
            })
        },
        getList(where){
            this.loading = true

            axpost('/official',where).then(res=>{
                let data = res.data
                if(res.status === 200 && data.status === 200){
                    this.data = data.result.list
                    this.total = data.result.total
                }else{
                    this.$notify({title:'提示',message:'数据获取超时',type:"warning"})
                }
                this.loading = false
            })
        },
        onDel(row){
            this.$confirm('确认删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.loading = true
                axpost('/official/remove',{id:row.id}).then(res => {
                    let data = res.data
                    if(res.status === 200 && data.status === 200){
                        this.$message.success('删除成功')
                        this.onLoad()
                    }else{
                        this.$message.warning('删除失败')
                    }
                    this.loading = false
                })
            }).catch(r=>{})
            
        },
        handleCurrentChange(val){
            this.p = val
            this.onLoad()
        },
        handleSizeChange(val){
            this.limit = val
            this.onLoad()
        }
    }
}
</script>